<template>
	<view class="shop-item-list">
		<view class="item-content-view" v-for="(item, index) in shopItems" :key="index" @tap="clickItem(item)" >
			<!-- 图片 -->
			<image :src="item.img" mode=""></image>
			<!-- 文字 -->
			<view>
				<text class="item-content-view-l"> {{item.title}} </text>
				<text class="item-content-view-r"> ¥{{item.price}} </text>
			</view>
		</view>
		<uni-load-more :loadingType="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from "components/uni-load-more.vue"

	export default {
		components:{
			uniLoadMore
		},
		props:{
			shopItems:{
				type: Array,
				default: function(){
				  return []
				}
			},
			loadingType: {
				type:Number,
				default:1
			}
		},
		methods:{
			clickItem(item){
				// console.log(id)
				this.$emit('clickItem',item)
			}
		}
	}
	
</script>

<style lang="scss">
	.shop-item-list {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		
		.item-content-view {
			margin-top: 10upx;
			display: flex;
			flex-direction: column;
			background-color: rgba(242, 242, 242, 1)
		}
		
		.item-content-view image {
			width: 750upx;
			height: 380upx;
		}
		
		.item-content-view view {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 5upx 20upx;
			font-size: 28upx;
			min-height: 100upx;
		}
		
		.item-content-view-l {
			width: 70%;
			color: #666;
			align-self: center;
		}
		
		.item-content-view-r {
			/* width: 30%; */
			color: red;
			align-self: center;
		}
	}
</style>
